<template>
	<view class="container files-logIdx-container">
		<view class="page-main">
			<view>
				<view class="label-list" @click="jumpDetail('xy')">
					<view class="label-top">
						<text class="iconfont" style="color:#F55C4C ;">&#xe62d;</text>
						<text class="label-title">血压检测</text>
					</view>
					<view class="label-main">
						<text class="label-num">{{pageData.xy?.value || '--'}}</text>
						<text class="label-unit">mmHg</text>
					</view>
					<view class="label-bottom" :class="getStatusClass('xy',pageData.xy?.value || 0)">
						<text class="iconfont">{{getStatus('xy',pageData.xy?.value || 0).ico}}</text>
						<text class="label-type">{{getStatus('xy',pageData.xy?.value || 0).text}}</text>
					</view>
				</view>
				<view class="label-list" @click="jumpDetail('xt')">
					<view class="label-top">
						<text class="iconfont" style="color:#FEA65C ;">&#xe683;</text>
						<text class="label-title">血糖趋势</text>
					</view>
					<view class="label-main">
						<text class="label-num">{{pageData.xt?.value || '--'}}</text>
						<text class="label-unit">mmol</text>
					</view>
					<view class="label-bottom" :class="getStatusClass('xt',pageData.xt?.value || 0)">
						<text class="iconfont">{{getStatus('xt',pageData.xt?.value || 0).ico}}</text>
						<text class="label-type">{{getStatus('xt',pageData.xt?.value || 0).text}}</text>
					</view>
				</view>
				<view class="label-list" @click="jumpDetail('tz')">
					<view class="label-top">
						<text class="iconfont" style="color:#52BBF2 ;">&#xe641;</text>
						<text class="label-title">体重检测</text>
					</view>
					<view class="label-main">
						<text class="label-num">{{pageData.tz?.value || '--'}}</text>
						<text class="label-unit">kg</text>
					</view>
					<view class="label-bottom" :class="getStatusClass('tz',pageData.tz?.value || 0)">
						<text class="iconfont">{{getStatus('tz',pageData.tz?.value || 0).ico}}</text>
						<text class="label-type">{{getStatus('tz',pageData.tz?.value || 0).text}}</text>
					</view>
				</view>
				<view class="label-list" @click="jumpDetail('ns')">
					<view class="label-top">
						<text class="iconfont" style="color:#638CFF ;">&#xe797;</text>
						<text class="label-title">今日尿酸</text>
					</view>
					<view class="label-main">
						<text class="label-num">{{pageData.ns?.value || '--'}}</text>
						<text class="label-unit">μmol</text>
					</view>
					<view class="label-bottom" :class="getStatusClass('ns',pageData.ns?.value || 0)">
						<text class="iconfont">{{getStatus('ns',pageData.ns?.value || 0).ico}}</text>
						<text class="label-type">{{getStatus('ns',pageData.ns?.value || 0).text}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue';
	import { onUnload } from "@dcloudio/uni-app"
	import { format, hideLoading, showLoading, showToast, toDecimalNoZero } from '../../common/util';
	import userApi from '../../common/userApi';
	const pageData = ref<any>({})
	const jumpDetail = (type) => {
		uni.navigateTo({ url: '/pagesChat/files/log?type=' + type })
	}

	onMounted(() => {
		getPageData()
	})
	const getPageData = async () => {
		showLoading()
		try {
			const res = await userApi.latestByCategories({})
			pageData.value = res.data


		} finally {
			hideLoading()
		}

	}

	const getStatusClass = (type, val) => {
		if (type === 'xy') {
			if (val > 120) return 'c-danger'
		} else if (type === 'xt') {
			if (val > 8) return 'c-danger'
		} else if (type === 'ns') {
			if (val > 400) return 'c-danger'
		} else if (type === 'tz') {
			if (val > 80) return 'c-danger'
		}
		return 'c-success'
	}
	const getStatus = (type, val) => {
		if (type === 'xy') {
			if (val > 120) return { ico: '\ue621', text: '异常' }
		} else if (type === 'xt') {
			if (val > 8) return { ico: '\ue621', text: '异常' }
		} else if (type === 'ns') {
			if (val > 400) return { ico: '\ue621', text: '异常' }
		} else if (type === 'tz') {
			if (val > 80) return { ico: '\ue621', text: '异常' }
		}
		return { ico: '\ue63c', text: '正常' }
	}
</script>

<style lang="scss">
	.files-logIdx-container {
		background: linear-gradient(180deg, #DAFBFB 0%, #D7E5FF 8%, #F2F3F8 40%, #F2F3F8 100%);
		padding: 30rpx;
		padding-bottom: 220rpx;

		.page-main {
			margin-top: 10rpx;
		}

		.label-list {
			background-color: #fff;
			box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;
			display: inline-block;
			width: 49%;
			margin-bottom: 20rpx;
			padding: 20rpx;
		}

		.label-list:nth-child(2n) {
			margin-left: 2%;
		}

		.label-top {
			padding: 10rpx 0;
			display: flex;
			align-items: center;

			.iconfont {
				font-size: 48rpx;
			}
		}

		.label-title {
			font-weight: bold;
			font-size: 30rpx;
			color: #6D6D6D;
			margin-left: 10rpx;
		}

		.label-main {
			margin-top: 30rpx;
		}

		.label-num {
			font-weight: bold;
			font-size: 42rpx;
			color: #333333;
		}

		.label-unit {
			font-size: 28rpx;
			color: #AAAAAA;
			margin-left: 20rpx;
		}

		.label-bottom {
			margin-top: 15rpx;

			.iconfont {
				font-size: 28rpx;
			}
		}

		.label-type {
			font-size: 24rpx;
			margin-left: 10rpx;
		}

	}
</style>